{extend name="layout/layout" /}

{block name="header"}
	<header class="mui-bar mui-bar-nav">
		<div class="search" onclick="search()">
			<i class="mui-icon mui-icon-search"></i> 寻找宝贝
		</div>
	</header>
{/block}

{block name="style"}
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.css">
	<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.min.css"> -->
	<style>
		header.mui-bar .search{
			background: #fff;
			text-align: center;
			height: 35px;
			margin-top: 5px;
			border-radius: 5px;
			line-height: 35px;
			color: #a5a5a5;
		}

		.search .mui-icon{
			padding: 0;
			color: #a5a5a5;
		}
		.category{
			padding: 10px 0;
			background: #fff;
		}

		.category .category-item{
			width:20%;
			float: left;
			padding: 0 10px;
		}

		.category .category-item p{
			font-size: 12px;
			margin-bottom: 0;
		}
		
		.hot{
			background: #fff;
			margin-top: 5px;
		}
		.hot .hot-title{
			line-height: 40px;
			border-bottom: 1px solid #ccc;
			padding-left: 10px;
			color:#fff;
			background: url('/assets/mobile/images/index_bg.png');
		}

		.hot .price{
			font-size: 10px;
			color:#e60012;
		}


		.action{
			margin-top: 5px;
			background: #fff;
		}

		.action img{
			height: 100px;
			width: 187px;
		}

		.recommend{
			background: #fff;
			margin-top: 5px;
			padding-bottom: 20px;
		}

		.recommend .mui-row{
			display: flex;
			flex-wrap: wrap;
			width: 100%;
		}

		.recommend-title{
			line-height: 40px;
			color:#fff;
			border-bottom: 1px solid #ccc;
			background: url('/assets/mobile/images/index_bg.png');
		}

		.goods-name{
			font-size:12px;
			overflow:hidden; 
			text-overflow:ellipsis;
			display:-webkit-box; 
			-webkit-box-orient:vertical;
			-webkit-line-clamp:2; 
			text-align: left;
		}

		.recommend p{
			margin-bottom: 5px;
		}

		.recommend .mui-col-xs-6{
			padding: 5px;
			background: #fff;
		}

		.recommend img{
			height: 197px;
		}


		.recommend .price{
			color:#e60012;
		}
		
		.tags{
			color: #fff;
		}

		.tags .tag{
			padding: 3px 5px;
			font-size: 10px;
			opacity: 0.6;
		}

		.hot .img-box{
			height: 77px;
			text-align: center;
		}

		
		
	</style>
{/block}

{block name="main"}
	<div class="index" v-cloak>
	<!-- 	<div class="mui-slider">
			<div class="mui-slider-group">
				<div class="mui-slider-item" v-for="ban in banner"><a href="#"><img :src="ban.img" /></a></div>
			</div>
		</div> -->

		<div class="swiper-container banner-swiper">
		    <div class="swiper-wrapper">
		        <div class="swiper-slide" v-for="ban in banner" @tap="checkAd(ban)">
		        	<img :src="ban.app_image" class="img-responsive" />
		        </div>
		    </div>
		    <!-- 如果需要分页器 -->
		    <div class="swiper-pagination"></div>
		    
		</div>

		<div class="mui-row mui-text-center category">
			<div class="category-item" v-for="cat in category"  @tap="checkAd(cat)">
				<img :src="cat.app_image" class="img-responsive" alt="">
				<p>{{cat.name}}</p>
			</div>
		</div>


		<!-- 热卖区开始 -->
		<div class="mui-text-center hot">
			<div class="hot-title">热卖区</div>
			<div class="swiper-container hot-swiper mui-row">
				<div class="swiper-wrapper">
				    <div class="mui-col-xs-3 swiper-slide" v-for="hot in hotGoods">
						<a :href="'/mobile/goods/detail/id/'+hot.id">
							<div class="img-box">
								<img :src="hot.original_image" class="img-responsive" alt="">
							</div>
							<p class="goods-name ellipsis-2">{{hot.goods_name}}</p>
							<p class="mui-text-left price">￥{{hot.shop_price}}</p>
						</a>
					</div>
				</div>
			</div>

		</div>
		<!-- 热卖区结束 -->

		<div class="mui-row mui-text-center action">
			<div class="mui-col-xs-6" v-for="cat in action"   @tap="checkAd(cat)">
				<img :src="cat.app_image" class="img-responsive" alt="">
			</div>
		</div>

		<!-- 为你推荐开始 -->
		<div class="mui-row  recommend">
			<div class="recommend-title mui-text-center">为您推荐</div>
			<div class="mui-row">
				<div class="mui-col-xs-6" v-for="rec in recommend">
					<a :href="'/mobile/goods/detail/id/'+rec.id">
						<img :src="rec.original_image" class="img-responsive" alt="">
						<p class="">
							<span class="price">积分抵扣 {{rec.point}} 元</span>
							<span class="del-price mui-pull-right">￥{{rec.shop_price}}</span>
						</p>
						<p class="">
							<span class="price">VIP收益 {{rec.sendmoney}} 元</span>
							<span class="del-price mui-pull-right">销量:{{rec.sale_number}}件</span>
						</p>
						<p class="goods-name ellipsis-2">{{rec.goods_name}}</p>
					</a>
				</div>
			</div>
		</div>
		<!-- 为你推荐结束 -->


	</div>
{/block}

{block name="script"}
 
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.js"></script>
	<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.min.js"></script> -->
	<script>

		function search(){
			location.href = "/mobile/index/search";
		}

		var indexVue = new Vue({
			el:'.index',
			data: {
				banner: [],
				action: [],
				category: [],
				hotGoods: [],
				recommend: []
			},
			mounted: function(){
				this.getIndexData();
			},
			methods:{
				getIndexData: function(){
					layer.open({
						type: 2,
						shadeClose: false,
					});
					var url =  'index/index';
					var that = this;
					request(that, {'url':url}, function(res){
						if(res.code == 200) {
							layer.closeAll();
							that.banner = res.data.banner;
							that.action = res.data.action;
							that.category = res.data.category;
							that.hotGoods = res.data.hotGoods;
							that.recommend = res.data.recommend;
							// var mySwiper = new Swiper('.swiper-container');
							that.bannerSwiper();
							that.hotSwiper();
						} else {
							mui.toast(res.msg);
						}	
					});
				},
				bannerSwiper:function(){
                    var bannerSwiper = new Swiper('.banner-swiper', {
                        observer:true, //修改swiper自己或子元素时，自动初始化swiper
    					observeParents:true,//修改swiper的父元素时，自动初始化swiper
    					pagination: {
						    el: '.swiper-pagination',
						},
                    });
                },
                hotSwiper:function(){
                    var bannerSwiper = new Swiper('.hot-swiper', {
                        observer:true, //修改swiper自己或子元素时，自动初始化swiper
    					observeParents:true,//修改swiper的父元素时，自动初始化swiper
    					slidesPerView: 4,
				        spaceBetween: 30,
				        freeMode: true,
                    });
                },
                //广告判断
                checkAd: function(item) {
                	switch(item.android_class) {
                		case 'CateListActivity':
                			//分类商品
                			if(item.param_id) {
                				location.href = '/mobile/category/goodsList/id/'+item.param_id;
                			}
                			break;

                		case 'WebviewActivity':
                			//网页
                			if(item.url) {
                				location.href = item.url;
                			}
                			break;
                		
                		case 'WZGWShopDetailViewController':
                			//商品详情
                			if(item.param_id) {
                				location.href = '/mobile/goods/detail/id/'+item.param_id;
                			}
                			break;
                		case 'PddShopViewController':
                			//拼多多
                			location.href = '/mobile/coupon';
                			break;
                		case 'TaobaoActivity':
                			//拼多多
                			location.href = '/mobile/coupon';
                			break;
                		case 'SpikeGoodsController':
                			//秒杀商品
                			location.href = '/mobile/goods/spike';
                			break;
                		case 'GroupGoodsController':
                			//拼团商品
                			location.href = '/mobile/goods/group';
                			break;
                		case 'DialphoneActivity':
                			//拼团商品
                			location.href = '/mobile/call/index';
                			break;
                		
                		default:;
                	}

                }
			}
		});

		
	</script>
{/block}